<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="bt1">开始</button>
    <button id="bt2">停止</button>

    
    <div>
        当前进度：<span id="sp1">10%</span>
        <progress id="pr1" max="100" min="0" value="10"></progress>
    </div>


    <script>
        window.onload=function(){
            document.getElementById("sp1").innerHTML="0%";
            document.getElementById("pr1").value="0";

            let time=null;
            document.getElementById("bt1").onclick=function(){
                // alert("123");
                if(time!=null) return;

                time=setInterval(function(){
                    let i=parseInt(document.getElementById("pr1").value);
                    if(i==100&&i!=null)
                    {
                        clearInterval(time);
                        return;
                    }
                    i++;
                    
                    document.getElementById("pr1").value=i;
                    document.getElementById("sp1").innerHTML=i.toString()+"%";

                },100)

            };


            document.getElementById("bt2").onclick=function(){
                // alert("456");
                clearInterval(time);
                time=null;
            };
        };

    </script>
</body>
</html>